<template>
	<custom-navbar title="手写签名"></custom-navbar>
	<view class="whole canvas-autograph flexc" @touchmove.prevent.stop @wheel.prevent.stop >
		<canvas class="scroll-view" id="mycanvas" canvas-id="mycanvas" 
			@touchstart="touchstart" 
			@touchmove="touchmove" 
			@touchend="touchend"/>
		<view class="fun-box">
			<view class="fun-box-btn clear flex" @click="clear">
				<text>清空</text>
			</view>
			<view class="fun-box-btn confirm flex" @click="confirm">
				<text>确认</text>
			</view>
			<view class="fun-box-btn cancel flex" @click="cancel">
				<text>取消</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	/*
		使用如下
		<canvas-autograph v-model="isCanvas" @complete="complete"/>
		
		// 打开、关闭
		let isCanvas = ref(false)
		// 确认事件
		const complete = e=>{
			console.log(e)
		}
	
	*/
	import { ref, reactive, watch, getCurrentInstance } from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	import {signStorage} from "@/api/document.js"
	const deliveryIdVal = ref(null)
	onLoad((data)=>{
		const {deliveryId} = data
		deliveryIdVal.value = deliveryId
	})
	// const emits = defineEmits(['update:modelValue','complete'])
	
	// const props = defineProps({
	// 	modelValue:Boolean,
	// })
	// watch(()=>props.modelValue,e=>{
	// 	// 这里可进行 tabbar 的 显示、隐藏  不要也可以
	// 	// 自己写
	// },{
	// 	immediate:true, // 是否默认执行一次  默认为false
	// })
	const _this = getCurrentInstance()
	
	let points = reactive([]) //路径点集合 
	
	let canvaCtx = reactive(uni.createCanvasContext('mycanvas', _this))   //创建绘图对象
	//设置画笔样式
	canvaCtx.lineWidth = 4;
	canvaCtx.lineCap = 'round'
	canvaCtx.lineJoin = 'round'
	
	
	//触摸开始，获取到起点
	const touchstart = e=>{
		let startX = e.changedTouches[0].x
		let startY = e.changedTouches[0].y
		let startPoint = {X:startX,Y:startY}
		points.push(startPoint);
		//每次触摸开始，开启新的路径
		canvaCtx.beginPath();
	}
	//触摸移动，获取到路径点
	const touchmove = e=>{
		let moveX = e.changedTouches[0].x
		let moveY = e.changedTouches[0].y
		let movePoint = {X:moveX,Y:moveY}
		points.push(movePoint)       //存点
		let len = points.length
		if(len>=2){
			draw()
		}
	}
	//绘制路径
	const draw = ()=> {
		let point1 = points[0]
		let point2 = points[1]
		points.shift()
		canvaCtx.moveTo(point1.X, point1.Y)
		canvaCtx.lineTo(point2.X, point2.Y)
		canvaCtx.stroke()
		canvaCtx.draw(true)
	}
	// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
	const touchend = e=>{                   
		points = [];
	}
	// 清空画布
	const clear = ()=>{
		return uni.getSystemInfo()
		.then(res=>{
			canvaCtx.clearRect(0, 0, res.windowWidth, res.windowHeight);
			canvaCtx.draw(true);
			return res
		})
		.catch(err=>{
			// console.log(err);
		})
	}
	// 确认
	const confirm = ()=>{
		uni.canvasToTempFilePath({ canvasId: 'mycanvas', }, _this, _this.parent)
		.then(async(res)=>{
		const {code,data:result,msg} = await signStorage(deliveryIdVal.value,{
			image:res.tempFilePath,
			timestamp:Date.now()
		})
		if(code === 200){
			if(result){
				uni.showToast({
					icon:"success",
					title:"签名成功！",
					duration:1500,
					success() {
						cancel()
					}

				})
			}
		}else{
			uni.showToast({
				icon:"error",
				title:msg
			})
		}
			
		})
	}
	// 取消
	const cancel = ()=>{
		uni.navigateTo({
		url:"/pages/administrativeAgencies/administrativeAgencies"	
		})
	}

</script>

<style scoped lang="scss">
	.canvas-autograph {
		position: fixed;
		z-index: 998;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		.scroll-view {
			width: 100%;
			height: 100%;
			background-color: #FFFFFF;
		}
		.fun-box {
			position: absolute;
			height: 90rpx;
			right: 10rpx;
			bottom: 10rpx;
			height: auto;
			display: flex;
			flex-direction: column;
			.fun-box-btn {
				width: 100rpx;
				height: 160rpx;
				color: #FFFFFF;
				border-radius: 20rpx;
				border: 1rpx solid #C0C0C0;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 15rpx;
				text {
					transform: rotate(90deg);
				}
			}
			.clear {
				color: #909399;
				background-color: #F4F4F5;
			}
			.confirm {
				background-color: #409EFF;
			}
			.cancel {
				background-color: #F67D7D;
			}
		}
	
	}
</style>
